<div class="easyui-layout" data-options="fit:true" >

    <!--    角色操作-->
    <div data-options="region:'north'" style="height:50px;border:0">
        <table style="padding:0;margin-left:5px">
            <tr>
                <td style="width:800px;height:100%;overflow:auto;float:left">
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add'"
                       onclick="addRoleButton();">添加角色</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-edit'"
                       onclick="updateRoleButton();">编辑角色</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"
                       onclick="deleteRoleButton();">删除角色</a>
                </td>
                <td style="width:200px;height:100%;overflow:auto;float:left">
                    <h3>角色权限</h3>
                </td>
            </tr>
        </table>
    </div>

    <!--    角色信息-->
    <div data-options="region:'center'" style="border:0;padding:5px;overflow:hidden;">

        <!--        角色列表-->
        <div style="width:800px;height:100%;overflow:auto;border:1px solid #ccc;float:left">
            <table id="accRole_role_grid"></table>
        </div>

        <!--        菜单树-->
        <div style="width:200px;height:100%;overflow:auto;border:1px solid #ccc;float:left">
            <ul id="accRole_menu_tree"></ul>
        </div>
    </div>
</div>

<!--编辑角色-->
<div id="accRole_edit_dialog">
    <form id="accRole_edit_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td><input type="hidden" id="accRole_edit_form_id" name="id"/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色名称:</td>
                <td><input id="accRole_edit_form_name" name="name" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色标识:</td>
                <td><input id="accRole_edit_form_sign" name="sign" class="easyui-textbox" required disabled/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色说明:</td>
                <td><input id="accRole_edit_form_remark" name="remark" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色状态:</td>
                <td><input id="accRole_edit_form_status" name="status" required/></td>
            </tr>
        </table>
    </form>
</div>


<!--添加角色-->
<div id="accRole_add_dialog">
    <form id="accRole_add_form" method="post">
        <table style="margin-bottom:20px;width:100%">
            <tr>
                <td style="text-align: right;">角色名称:</td>
                <td><input id="accRole_add_form_name" name="name" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色标识:</td>
                <td><input id="accRole_add_form_sign" name="sign" class="easyui-textbox" required/></td>
            </tr>
            <tr>
                <td style="text-align: right;">角色说明:</td>
                <td><input id="accRole_add_form_remark" name="remark" class="easyui-textbox" required/></td>
            </tr>
        </table>
    </form>
</div>

<script>

    var selectedRowIndex = 0;

    $(function(){
        initRoleGrid();
        initRoleComponents();
    });

    function initRoleGrid() {
        $('#accRole_role_grid').datagrid({
            url:'queryAllRoles',
            idField:'id',
            fitColumns: true,
            fit:true,
            scrollbarSize:1,
            striped: true,
            checkOnSelect:false,
            selectOnCheck:false,
            singleSelect:true,
            columns:[
                [
                {field:'id',title:'编码',width:50,align:'center',halign:'center'},
                {field:'name',title:'名称',width:150,align:'center',halign:'center'},
                {field:'sign',title:'标识',width:150,align:'center',halign:'center'},
                {field:'remark',title:'说明',width:180,align:'center',halign:'center'},
                {field:'status',title:'状态',width:50,align:'center',halign:'center'},
                {field:'create_time',title:'创建时间',width:180,align:'center',halign:'center'},
                {field:'update_time',title:'更新时间',width:180,align:'center',halign:'center'}
                ]
            ],
            loadFilter: function (data) {
                if (data.data) {
                    return data.data;
                } else {
                    return data;
                }
            },
            onLoadSuccess: function (node, data) {
                $(this).datagrid('selectRow', selectedRowIndex);
                queryMenuTreeByRoleId(node.rows[0].id);
            },
            onClickRow: function (index, row) {
                selectedRowIndex = index;
                queryMenuTreeByRoleId(row.id);
            }
        });
    }

    function initRoleComponents() {
        $('#accRole_edit_form_status').combobox({
            valueField: 'id', textField: 'text',
            panelHeight: 70, editable: false,
            data: [
                {"id": 1, "text": "可用"},
                {"id": 0, "text": "不可用"}
            ]
        });

        $('#accRole_add_form_sign').textbox({
            invalidMessage: '该角色标识已占用',
            validType: {
                // 请求服务器，校验用户名是否可用
                remote:['/verifyRoleSign', 'roleSign']
            }
        });
    }

    // 根据 role_id 加载菜单树
    function queryMenuTreeByRoleId(role_id) {
        $('#accRole_menu_tree').tree({
            url: '/queryMenuTreeByRoleId',
            queryParams: {
                id: role_id
            },
            checkbox:true,
            method:'post',
            animate:true,
            width: 200, height: 720,
            loadFilter: function (data) {
                if (data.data) {
                    return data.data;
                } else {
                    return data;
                }
            },
            onLoadSuccess: function (node, data) {},
            onSelect: function (node) {},
            onCheck: function (node, checked) {
                roleMenuTreeOnCheckHandler(node, checked);
            }
        });
    }

    function roleMenuTreeOnCheckHandler(node, checked) {
        var menuType = 'DIR';
        if (node.children === undefined) {
            menuType = 'SUBMENU';
        }

        var roleId = $('#accRole_role_grid').datagrid('getSelected').id;

        $.ajax({
            url: '/processRoleMenus',
            type: "post",
            data: {
                roleId: roleId,
                menuId: node.id,
                menuType: menuType,
                checked: checked
            },
            dataType: "json",
            async: false,
            success: function (data) {
                var msg;
                if (data.code === 200) {
                    $('#accRole_role_grid').datagrid('selectRecord', roleId);
                    queryMenuTreeByRoleId(roleId);

                    if (checked) msg = '菜单增加成功！';
                    else msg = '菜单删除成功！';
                    $.messager.show({title: '提示', msg: msg, timeout: 2000, showType: 'slide'});
                } else {

                    if (checked) msg = '菜单增加失败！';
                    else msg = '菜单删除失败！';
                    $.messager.alert("提示", msg, 'info');
                }
            }
        });
    }

    // 添加角色
    function addRoleButton() {
        $('#accRole_add_dialog').dialog({
            title: '添加角色', iconCls: 'icon-add',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accRole_add_form').form('clear').form('reset');
            },
            buttons: [
                {
                    id: 'accRole_add_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: addRole
                }, {
                    id: 'accRole_add_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accRole_add_dialog").dialog("close");
                    }
                }
            ]
        });
    }

    function addRole() {
        if (!$('#accRole_add_form').form('validate')) {
            return;
        }

        $('#accRole_add_form').form('submit', {
            url: '/addRole',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "角色添加失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '角色添加成功！', timeout: 2000, showType: 'slide'});
                selectedRowIndex = 0; // 添加完菜单，再重新加载菜单是，选择第一个
                $("#accRole_add_dialog").dialog("close");
                $("#accRole_role_grid").datagrid("reload");
            }
        });
    }

    function deleteRoleButton() {
        var role = $('#accRole_role_grid').datagrid("getSelected");
        if (!role) {
            $.messager.alert("提示", "请选择要删除的角色！", 'info');
            return;
        }

        $.messager.confirm('确认', '您确认想要删除该角色吗？', function (r) {
            if (!r) {
                return;
            }

            $.ajax({
                url: '/deleteRoleById',
                type: "post",
                data: {id: role.id},
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data.code !== 200) {
                        $.messager.alert("提示", data.message, 'info');
                        return;
                    }

                    $.messager.show({title: '提示', msg: '删除角色成功！', timeout: 2000, showType: 'slide'});
                    selectedRowIndex = 0;   // 删除完菜单，再重新加载菜单是，选择第一个
                    $("#accRole_role_grid").datagrid("reload");
                }
            });
        });
    }

    // 编辑角色
    function updateRoleButton() {
        var role = $('#accRole_role_grid').datagrid("getSelected");
        if (!role) {
            $.messager.alert("提示", "请选择要编辑的角色！", 'info');
            return;
        }

        // 加载编辑角色内容
        $("#accRole_edit_form").form('load', {
            id: role.id,
            name: role.name,
            sign: role.sign,
            remark: role.remark,
            status: role.status
        });

        $('#accRole_edit_dialog').dialog({
            title: '编辑角色', iconCls: 'icon-edit',
            width: 380, height: 350, modal: true, shadow: true,
            onClose: function () {
                $('#accRole_edit_form').form('clear').form('reset');
            },
            buttons: [
                {
                    id: 'accRole_edit_dialogsave',
                    text: '保存', iconCls: 'icon-save',
                    handler: updateRole
                }, {
                    id: 'accRole_edit_dialogclose',
                    text: '关闭', iconCls: 'icon-clear',
                    handler: function () {
                        $("#accRole_edit_dialog").dialog("close");
                    }
                }
            ]
        });
    }

    function updateRole() {
        if (!$('#accRole_edit_form').form('validate')) {
            return;
        }

        $('#accRole_edit_form').form('submit', {
            url: '/updateRole',
            ajax: true,
            onSubmit: function () {},
            success: function (data) {
                data = JSON.parse(data);

                if (data.code !== 200) {
                    $.messager.alert("提示", "角色更新失败！", 'info');
                    return;
                }

                $.messager.show({title: '提示', msg: '角色更新成功！', timeout: 2000, showType: 'slide'});

                $("#accRole_edit_dialog").dialog("close");
                $("#accRole_role_grid").datagrid("reload");
            }
        });
    }
</script>